<template>
  <div :style="'height: '+windowHeight+'px;'" class="flex align-center justify-between" style="background-color: #0086b3;">
      <!--左面背景-->
      <div class="flex">
        <!--20200709没有弄懂图片缩放原理-->
        <img src="../../assets/img/6135226.jpg" :style="'height: '+windowHeight+'px;'" width="1440">
      </div>

      <!--右面登陆-->
      <div class="flex flex-column" style="width: 480px;height: 100%;background-color: #FFFFFF;">
        <div class="flex flex-column"  style="margin-top: 50px;margin-bottom: 50px;margin-left: 90px;">
          <div class="flex flex-column justify-center">
            <span style="font-size: 25px;color:#003A81;font-family: Algerian;">九 州 缘 起</span>
            <span style="font-size: 15px;color:#003A81;font-family: Algerian;">精彩生活 由你掌握</span>
          </div>
        </div>
        <!--登陆注册-->
        <div class="flex flex-column" style="height: 720px;margin-top: 80px;margin-bottom: 80px;
        margin-left: 90px;margin-right: 90px;">
          <div class="flex">
            <span style="color: #262626;font-size: 30px;font-family: Algerian;">Login</span>
          </div>
          <div style="margin-top: 20px;">
            <input placeholder="请输入手机号" style="width: 300px;height: 35px;"></input>
          </div>
          <div style="margin-top: 20px;">
            <input placeholder="请输入验证码" style="width: 300px;height: 35px;"></input>
          </div>
          <div class="flex align-center justify-center mt-2">
            <span>手机号登录注册</span>

            <span style="margin-left: 20px;margin-right: 20px;">|</span>
            <!--密码登录-->
            <span>忘记密码</span>
          </div>
          <div style="margin-top: 20px;">
            <button style="width: 300px;height: 35px;">验 证 登 录</button>
          </div>
          <div style="margin-top: 20px;" class="flex align-center justify-center">
            <span>登录即代表你同意用户协议和隐私协议</span>
          </div>
          <!--<div class="flex flex-column">-->
            <!--<div>-->
              <!--<span>AAABBBCCC@163.com</span>-->
            <!--</div>-->
            <!--<div>-->
              <!--<span>+86-XXX-XXXXXXXX</span>-->
            <!--</div>-->
            <!--<div>-->
              <!--<span>©2020-07 Author QQxiaodi. All rights reserved.</span>-->
            <!--</div>-->
            <!--<div>-->
              <!--<span></span>-->
            <!--</div>-->

          <!--</div>-->
        </div>
      </div>
    </div>

</template>

<script>
    export default {
      name: "Login",
      data() {
        return {
          note: {
            backgroundImage: "url(" + require("../../assets/img/login-bg1.jpg") + ")",
            backgroundSize: "100%",
            backgroundRepeat: "no-repeat",
            backgroundPosition: "center center"
          },
          windowHeight:0
        }
      },
      mounted:function(){
        this.windowHeight = document.documentElement.clientHeight;
        // this.windowHeight = window.innerHeight;
        // console.log(this.windowHeight);


      },
      methods: {
        login() {
          // 假设登陆成功，则跳转到 home 组件
          // this.$router.push({name:'Home', query:{id: 3}});
          this.$router.replace('/home');
        }
      }
    }
</script>

<style scoped>
.login-bg-imgstyle{
  max-width:1900px;
  width:expression(this.width > 1900 ? "1900px" : this.width);
}

</style>
